<template>
  <div class="home-index">
    <!-- 轮播图 -->
    <div class="top">
      <Swiper :bannerList="bannerList" />
    </div>
    <!-- 八个列表 -->
    <div class="box">
      <Type :list="list" />
    </div>
    <!-- 销量 -->
    <Xiaoliang @left-click="left" @center-click="center" @right-click="right" />
    <!-- 文本 -->
    <Wenben />
    <!-- 商品列表 -->
    <List />
    <!-- tab标签页 -->
    <Footer />
  </div>
</template>

<script>
import $axios from "../../api/request";
import Footer from "../../components/Footer.vue";
import Swiper from "./components/Swiper.vue";
import Type from "./components/type.vue";
import Miaosha from "./components/miaosha.vue";
import Xiaoliang from "../home/components/Xiaoliang";
import Wenben from "./components/Wenben.vue";
import List from "./components/List.vue";
export default {
  components: {
    Footer,
    Swiper,
    Type,
    Miaosha,
    Xiaoliang,
    Wenben,
    List,
  },
  data() {
    return {
      bannerList: [],
      list: [],
      currPage: 1,
      clickList: [],
      inventory: [],
      shoppingList:[]
    };
  },
  created() {
    this.getSwiper();
    this.getList();
  },
  methods: {
    doSort(prop) {
      return function (a, b) {
        let value1 = a[prop];
        let value2 = b[prop];
        return value1 - value2;
      };
    },
    left() {
      this.shopping();
    },
    center() {
      $axios
        .get("http://zl.huruqing.cn:3003/product/list?currPage=1")
        .then((res) => {
          this.shoppingList = res.list.sort(this.doSort("inventory"));
        });
    },
    right() {
      $axios
        .get("http://zl.huruqing.cn:3003/product/list?currPage=1")
        .then((res) => {
          this.shoppingList = res.list.sort(this.doSort("minPrice"));
        });
    },
    //轮播图
    getSwiper() {
      $axios
        .get("http://zl.huruqing.cn:3003/product/getBanners")
        .then((res) => {
          this.bannerList = res.banners;
        });
    },
    //八
    getList() {
      $axios.get("http://zl.huruqing.cn:3003/category/all").then((res) => {
        this.list = res.list;
      });
    },
    //渲染下面列表
    shopping() {
      let obj = {
        currPage: this.currPage,
      };
      $axios.get("http://zl.huruqing.cn:3003/product/list", obj).then((res) => {
        this.shoppingList=res.list
      });
    },
  },
};
</script>
<style lang="scss">
@import "./home.scss";
</style>